<template>
  <div>
    <el-header>
      <i class="el-icon-user el-icon--right titSty" style="font-size: 1.2vw">
        学生信息 管理界面</i
      >
    </el-header>
    <el-table
      max-height="100%"
      :data="
        tableDataStudents.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      :header-cell-style="{
        width: '100%',
        color: '#333',
        fontSize: '1vw',
        fontWeight: 600,
        background: 'rgba(236,245,255,1)',
      }"
      :row-style="{
        fontSize: '0.8vw',
        color: 'rgb(85,26,139)',
      }"
      style="width: 100%; border: 1px solid rgba(208, 215, 223, 0.9)"
    >
      <el-table-column align="center" prop="id" sortable label="学号">
      </el-table-column>
      <el-table-column align="center" prop="name" sortable label="姓名">
      </el-table-column>
      <el-table-column
        align="center"
        prop="idNumber"
        width="150"
        sortable
        label="身份证"
      >
      </el-table-column>
      <el-table-column align="center" prop="sex" sortable label="性别">
      </el-table-column>
      <el-table-column align="center" prop="nativePlace" sortable label="籍贯">
      </el-table-column>
      <el-table-column
        align="center"
        prop="politicalOutlook"
        sortable
        label="政治面貌"
      >
      </el-table-column>
      <el-table-column align="center" prop="college" sortable label="学院">
      </el-table-column>
      <el-table-column align="center" prop="major" sortable label="专业">
      </el-table-column>
      <el-table-column align="center" prop="grade" sortable label="年级">
      </el-table-column>
      <el-table-column
        border
        align="center"
        prop="reportLoss"
        sortable
        label="挂失"
      >
      </el-table-column>
      <el-table-column border align="center" prop="state" sortable label="状态">
      </el-table-column>

      <el-table-column align="center" width="140" fixed="right">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-row>
            <el-col :span="16">
              <el-input
                v-model="search"
                prefix-icon="el-icon-search"
                size="mini"
                v-focus
                placeholder="姓名"
              />
            </el-col>

            <el-col :span="4"></el-col>
            <el-col :span="4">
              <router-link to="/admin/addStudent">
                <!-- @click="addStudent(scope.$index, scope.row)" -->
                <el-button
                  size="mini"
                  icon="el-icon-plus"
                  plain
                  type="success"
                ></el-button>
              </router-link>
            </el-col>
          </el-row>
        </template>

        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            plain
            @click="editStudent(scope.row.id)"
            ><router-link to="/admin/editStudent"></router-link>
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            plain
            @click="deletStudent(scope.row.id, scope.row.name)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import adminMixin from "../../mixin/adminMixin";
export default {
  name: "adminStudents",
  mixins: [adminMixin],
  data() {
    return {
      Stushow: true,
      search: "",
      flags: {
        flag: false, //弹框显示与隐藏
        flagadd: false, //新增弹窗
        editModal: false, //修改弹窗
      },
      tableDataStudents: [],
    };
  },

  mounted() {
    this.getStudentsDataReq("/admin/queryStudentUserList");
  },
  watch: {
    Students: function () {
      Object.keys(this.Students.data.data).forEach((key) => {
        this.tableDataStudents.push(this.Students.data.data[key]);
      });
    },
  },

  methods: {
    editStudent(id) {
      console.log(id);
      this.$router.push({ name: "editStudent", params: { id: id } });
    },

    deletStudent(id, name) {
      if (confirm("确定删除: " + name + " ?")) {
        this.tableDataStudents = this.tableDataStudents.filter(
          (student) => student.id !== id
        );
        // 发送删除请求
        this.postStuDelete("/admin/deleteStudentUserById/", id);
      }
    },
  },
};
</script>

<style scoped>
.el-header {
  height: 3vh !important;
  line-height: 3vh;
  text-align: center;
  background-color: #d0d7df;
  width: 100%;
  margin-bottom: 10px !important;
}
</style>
